<template>
  <div class="independent-pm-main">
    <div class="col-24 independent-pm-header padding-full">
      <panel>
        <div class="independent-pm-header-title">
          <div class="total"><span><img class="accessControl-img" src="static/img/logo2.8cfd4ea.png" alt=""></span>{{title}}</div>
        </div>
      </panel>
    </div>
    <div class="col-24 independent-pm-content padding-full">
      <div class="col-12 independent-pm-content-left">
        <panel>
          <div class="independent-pm-content">
            <div class="col-10 independent-pm-content-img">
              <img class="accessControl-img" src="../../../../static/images/PM2.5.png" alt="">
            </div>
            <div class="col-14 independent-pm-content-pm">
              <div class="independent-pm-content-pm-font">
                <div class="total">{{pm25.pm25}}ug/m³</div>
                <div class="independent-pm-content-pm-font-bottom">小区PM2.5</div>
              </div>
            </div>
          </div>
        </panel>
      </div>
      <div class="col-12 independent-pm-content-right">
        <div class="independent-pm-chart-top">
          <panel>
            <div class="col-24 independent-pm-content-play">
              <div class="independent-pm-content-pm-play-font"><span>空气质量 </span> 好</div>
              <div class="independent-pm-content-pm-play-font">宜运动</div>
            </div>
            <!--<div class="col-24 independent-pm-content-play">
              <div class="independent-pm-content-pm-play-font">较差 不宜运动</div>
              <div class="independent-pm-content-pm-play-bottom">广州空气质量</div>
            </div>-->
          </panel>
        </div>
        <div class="independent-pm-chart-bottom">
          <chart></chart>
        </div>
      </div>
    </div>
    <div class="col-24 independent-pm-footer independent-pm-padding-tb">
      <div class="col-6 full-height independent-pm-padding-lr">
        <panel>
          <div class="independent-pm-footer-data">
            <div class="col-24 independent-pm-footer-tvoc">
              <div class="total">{{pm25.tvoc}}ug/m³</div>
              <div class="independent-pm-footer-img">
                <img class="accessControl-img" src="../../../../static/images/TVOC.png" alt="">
                小区挥发性有机物
                <span>(空气品质优)</span>
              </div>
            </div>
          </div>
        </panel>
      </div>
      <div class="col-6 full-height independent-pm-padding-lr">
        <panel>
          <div class="independent-pm-footer-data">
            <div class="col-24 independent-pm-footer-tvoc">
              <div class="total">{{pm25.formaldehyde}}ug/m³</div>
              <div class="independent-pm-footer-img">
                <img class="accessControl-img" src="../../../../static/images/jiaquan.png" alt="">
                小区甲醛
                <span>(适宜入住)</span>
              </div>
            </div>
          </div>
        </panel>
      </div>
      <div class="col-6 full-height independent-pm-padding-lr">
        <panel>
          <div class="independent-pm-footer-data">
            <div class="col-24 independent-pm-footer-tvoc">
              <div class="total">{{pm25.temperature}}℃</div>
              <div class="independent-pm-footer-img">
                <img class="accessControl-img" src="../../../../static/images/wendu.png" alt="">
                小区温度
                <span>(适中)</span>
              </div>
            </div>
          </div>
        </panel>
      </div>
      <div class="col-6 full-height independent-pm-padding-lr">
        <panel>
          <div class="independent-pm-footer-data">
            <div class="col-24 independent-pm-footer-tvoc">
              <div class="total">{{pm25.humidity}}％</div>
              <div class="independent-pm-footer-img">
                <img class="accessControl-img" src="../../../../static/images/shidu.png" alt="">
                小区湿度
                <span>(中)</span>
              </div>
            </div>
          </div>
        </panel>
      </div>
    </div>
  </div>
</template>

<script>
import chart from './components/chart.vue'
import api from 'api'

// 设置 Cookies
function setCookie (name, value) {
  var Days = 30
  var exp = new Date()
  exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000)
  document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString()
}
let model = {
  'account': window.localStorage.getItem('account'),
  'password': window.localStorage.getItem('password')
}
console.log(model)
export default {
  name: 'independentPm',
  data () {
    return {
      title: '保利天悦社区空气质量指数',
      pmData: 28,
      tvocData: 0.23,
      formaldehydeData: 10,
      temperature: 29.5,
      humidity: 78,
      chartWidth: '400px',
      chartHeight: '230px',
      floorDatasDefault: {}
    }
  },
  components: {
    chart
  },
  computed: {
    pm25 () {
      if (!this.$store.getters.pm25) {
        return {
          'pm25': 28,
          'tvoc': 0.23,
          'formaldehyde': 10,
          'temperature': 29.5,
          'humidity': 78
        }
      }
      let obj = {}
      let res = _.clone(this.$store.getters.pm25)
      // 做一个天气质量的对应关系
      let oj = {
        '1': '很好',
        '2': '好',
        '3': '中',
        '4': '差',
        '5': '很差'
      }
      let color = {
        '1': 'green',
        '2': 'blue',
        '3': 'orange',
        '4': 'danger',
        '5': 'brownRed'
      }
      obj['pm25'] = res.data['0']
      obj['tvoc'] = res.data['1']
      obj['formaldehyde'] = res.data['2']
      obj['temperature'] = res.data['3']
      obj['humidity'] = res.data['4']
      for (let i in oj) {
        if (parseInt(i) === res.data['5']) {
          obj['airQuality'] = oj[i]
        }
      }
      for (let i in color) {
        if (parseInt(i) === res.data['5']) {
          obj['color'] = color[i]
        }
      }
      return obj
    }
  },
  mounted () {
    setTimeout(this.initialize, 400)
    // 获取空气质量检测仪数据
    this.requestRestfulData()
  },

  methods: {
    requestRestfulData () {
      this.auth()
    },
    auth () {
      api.corp.auth(model).then((res) => {
        window.localStorage.setItem('memberId', res.data.member_id)
        window.localStorage.setItem('corpId', res.data.corp_id)
        window.localStorage.setItem('accessToken', res.data.access_token)
        window.localStorage.setItem('refreshToken', res.data.refresh_token)
        // 过期时间
        window.localStorage.setItem('expiration', new Date(new Date().getTime() + res.data.expire_in * 1000))
        window.localStorage.setItem('expirationLimit', res.data.expire_in * 1000)
        setCookie('rememberPwd', true)
        setCookie('account', model.account)
        setCookie('password', model.password)
        this.$store.dispatch('updatePM25')
      }).catch((res) => {
        this.logining = false
      })
    }
  }
}

</script>

<style lang="stylus">
@import '../../../assets/stylus/base'
.independent-pm-main{
  width:100%;
  height:100%;
}
.independent-pm-header{
  height: 8%;
  .independent-pm-header-title{
    font-size:4vmin;
    line-height:7vmin;
    span{
      vertical-align: middle;
      padding: 0 2vmin;
    }
    img{
      width: 4vmin;
    }
  }
}
.independent-pm-chart-top{
  height: 60%;
  padding-bottom: 5px;
  box-sizing: border-box;
}
.independent-pm-chart-bottom{
  height: 40%;
  padding-top: 5px;
  box-sizing: border-box;
}
.independent-pm-content{
  height: 62%;
  .independent-pm-content-left{
    height: 100%;
    padding-right: 5px;
    box-sizing: border-box;
  }
  .independent-pm-content-right{
    height: 100%;
    padding-left: 5px;
    box-sizing: border-box;
    .independent-pm-content-play{
      span{
        color: #fff
      }
      padding-top: 7%;
    }
  }
  .independent-pm-content-pm{
    text-align:center;
    box-sizing: border-box;
    padding-top: 13%;
    font-size:7vmin;
    padding-right: 11%;
    line-height:7vmin;
    font-weight: 100;
    .total{
      font-size:10.6vmin;;
    }
    .independent-pm-content-pm-font{
      color: #fff;
      padding-right: 9%;
      padding-top: 18%;
    }
    .independent-pm-content-pm-font-bottom{
      padding-top: 10%
      color :#aaa
    }
  }
  .independent-pm-content-img{
    padding-top: 19%;
    text-align: center;
    box-sizing: border-box;
    padding-left: 9%;
    img{
      width: 66%;
    }
  }
  .independent-pm-content-play{
    box-sizing: border-box;
    text-align: center;
    .independent-pm-content-pm-play-font{
      font-size: 7vmin;
      font-weight: 500;
      color: #3ec152;
    }
  }
}
.independent-pm-footer{
  height: 30%;
  .independent-pm-footer-tvoc{
    padding-top: 9%;
    font-size: 3vmin;
    text-align: center;
    font-weight: 100;
    color: #aaa;
    box-sizing: border-box;
    .total{
      font-size: 7.5vmin;
      color: #3ec152;
      font-weight: 500;
    }
    span{
      margin-left: 10px;
      color: #3ec152;
    }
  }
  .independent-pm-footer-img{
    box-sizing: border-box;
    img{
      width: 9%;
      vertical-align: middle;
    }
  }
}
.independent-pm-padding-tb{
  padding:5px 0px;
  box-sizing: border-box;
}
.independent-pm-padding-lr{
  padding:0 5px;
  box-sizing: border-box;
}
</style>
